<template>
  <div class="container">
    <el-card>
      <div style="display: flex; justify-content: end; margin-bottom: 20px">
        <el-button type="success" size="small">
          <span class="el-icon-edit"  @click="$router.push('new')">新增试题</span>
        </el-button>
      </div>
      <el-form ref="form" label-width="80px" :inline="true">
        <el-form-item label="学科" style="width: 22%; margin-left: 30px">
          <el-select
            v-model="formData.subjectID"
            placeholder="请选择"
            style="width: 280px"
          >
            <el-option
              v-for="item in SimpleSubjectList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              @click.native="choiceObject(item.value)"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="二级目录" style="width: 22%; margin-left: 30px">
          <el-select
            v-model="formData.catalogID"
            placeholder="请选择"
            style="width: 280px"
          >
            <el-option
              v-for="item in Directoryslists"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="标签" style="width: 22%; margin-left: 30px">
          <el-select
            v-model="formData.tags"
            placeholder="请选择"
            style="width: 280px"
          >
            <el-option
              v-for="item in TagsLists"
              :key="item.tagName"
              :label="item.tagName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="关键字" style="width: 22%; margin-left: 30px">
          <el-input
            type="text"
            style="width: 280px"
            v-model="formData.keyword"
          ></el-input>
        </el-form-item>

        <el-form-item label="试题类型" style="width: 22%; margin-left: 30px">
          <el-select
            v-model="formData.questionType"
            placeholder="请选择"
            style="width: 280px"
          >
            <el-option label="单选" value="1"></el-option>
            <el-option label="多选" value="2"></el-option>
            <el-option label="简答" value="3"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="难度" style="width: 22%; margin-left: 30px">
          <el-select
            v-model="formData.difficulty"
            placeholder="请选择"
            style="width: 280px"
          >
            <el-option label="简单" value="1"></el-option>
            <el-option label="一般" value="2"></el-option>
            <el-option label="困难" value="3"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="方向" style="width: 22%; margin-left: 30px">
          <el-select
            v-model="formData.direction"
            placeholder="请选择"
            style="width: 280px"
          >
            <el-option label="o2o" value="o2o"></el-option>
            <el-option label="外包服务" value="外包服务"></el-option>
            <el-option label="企业服务" value="企业服务"></el-option>
            <el-option label="互联网金融" value="互联网金融"></el-option>
            <el-option label="企业咨询" value="企业咨询"></el-option>
            <el-option label="互联网" value="互联网"></el-option>
            <el-option label="电子商务" value="电子商务"></el-option>
            <el-option label="其他" value="其他"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="录入人" style="width: 22%; margin-left: 30px">
          <el-select
            v-model="formData.creatorID"
            placeholder="请选择"
            style="width: 280px"
          >
            <el-option
              v-for="item in creatorIDList"
              :key="item.id"
              :label="item.username"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="题目备注" style="width: 22%; margin-left: 30px">
          <el-input
            type="text"
            style="width: 280px"
            v-model="formData.remarks"
          ></el-input>
        </el-form-item>

        <el-form-item label="企业简称" style="width: 22%; margin-left: 30px">
          <el-input
            type="text"
            style="width: 280px"
            v-model="formData.shortName"
          ></el-input>
        </el-form-item>

        <el-form-item label="城市" style="width: 22%; margin-left: 30px">
          <el-col :span="12">
            <el-form-item>
              <el-select
                v-model="formData.province"
                placeholder="请选择"
                style="width: 131px"
              >
                <el-option
                  v-for="item in provinceList"
                  :key="item"
                  :label="item"
                  :value="item"
                  @click.native="choiceProvince(item)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item>
              <el-select
                v-model="formData.city"
                placeholder="请选择"
                style="width: 131px"
              >
                <el-option
                  v-for="item in cityList"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button size="small" @click="clearAll">清除</el-button>
          <el-button size="small" type="primary" @click="seachQuestions"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
      <el-alert type="info" :closable="false" show-icon>
        数据一共{{ counts }}条
      </el-alert>

      <el-table :data="questionsList" style="width: 100%">
        <el-table-column prop="number" label="试题编号" width="120">
        </el-table-column>
        <el-table-column prop="subject" label="学科" width="60">
        </el-table-column>
        <el-table-column prop="catalog" label="目录" width="100">
        </el-table-column>
        <el-table-column prop="questionType" label="题型" width="100"
          ><template #default="scope"
            ><div>
              {{ scope.row.questionType | questionTypefilter() }}
            </div></template
          >
        </el-table-column>
        <el-table-column prop="question" label="题干" width="400"
          ><template slot-scope="scope"
            ><div>{{ scope.row.question | tellfilter() }}</div></template
          >
        </el-table-column>

        <el-table-column prop="addDate" label="录入时间" width="200">
          <template slot-scope="scope"
            ><div>{{ scope.row.addDate | timefilter() }}</div></template
          >
        </el-table-column>
        <el-table-column prop="difficulty" label="难度" width="160"><template slot-scope="scope"
            ><div>
              {{ scope.row.difficulty | difficultyfilter() }}
            </div></template
          >
        </el-table-column>
        <el-table-column prop="creator" label="录入人" width="200">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope"
            >
            <el-button
              type="primary"
              plain
              circle
              icon="el-icon-view"
              @click="preview(scope.row)"
            ></el-button>
            <!-- ceshi  -->
            <el-button
              type="success"
              plain
              circle
              icon="el-icon-edit"
               @click="$router.push(`new?id=${scope.row.id}`)"
            ></el-button>
            <el-button
              type="danger"
              plain
              circle
              icon="el-icon-delete"
              @click="del(scope.row)"
            ></el-button>
            <el-button
              type="warning"
              plain
              circle
              icon="el-icon-check"
              @click="selectedQuestion(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="1"
        :page-sizes="[5, 20, 50, 100]"
        :page-size="5"
        layout="  prev, pager, next,sizes, jumper"
        :total= counts
        style="float: right; padding: 20px"
      >
      </el-pagination>
    </el-card>
    <TitlePreview :dialogVisible.sync="dialogVisible"
    :titleId="titleId"
    :Titledetil="Titledetil"
    :options="options"
    ></TitlePreview>
  </div>
</template>

<script>
import moment from 'moment'
import TitlePreview from '@/module-hmmm/components/questions-preview'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { list as basetitlelist, detail, remove, choiceAdd } from '@/api/hmmm/questions.js'
import { list as subjectlist, simple } from '@/api/hmmm/subjects.js'
import { simple as directorysSimpleList, list as directorysList } from '@/api/hmmm/directorys.js'
import { list as tagsList } from '@/api/hmmm/tags.js'
import { list } from '@/api/base/users.js'
export default {
  name: 'questions',
  components: {
    TitlePreview
  },
  filters: {
    // 修改时间格式
    timefilter (date) {
      return moment(date).format('YYYY - MM - DD HH:MM:SS')
    },

    tellfilter (v) {
      if (typeof (v) === 'string') { return v.replace(/<\/?.+?>/g, '') }
    },
    questionTypefilter (v) {
      if (v === '1') {
        return '单选'
      } else if (v === '2') {
        return '多选'
      } else if (v === '3') {
        return '简答'
      }
    },
    difficultyfilter (v) {
      if (v === '1') {
        return '简单'
      } else if (v === '2') {
        return '一般'
      } else if (v === '3') {
        return '困难'
      }
    }
  },
  data () {
    return {
      formData: {
        subjectID: undefined,
        catalogID: undefined,
        tags: undefined,
        keyword: undefined,
        questionType: undefined,
        difficulty: undefined,
        direction: undefined,
        creatorID: undefined,
        remarks: undefined,
        shortName: undefined,
        province: undefined,
        city: undefined,
        page: 1,
        pagesize: 5
      },
      titleId: 0,
      dialogVisible: false,
      counts: 0,
      cityList: [],
      provinceList: [],
      creatorIDList: [],
      SimpleSubjectList: [],
      Directoryslists: [],
      TagsLists: [],
      questionsList: [],
      Titledetil: {},
      options: []
    }
  },
  created () {
    this.getQuestionsList()
    const provincelist = provinces()
    // console.log(zzz)
    this.provinceList = provincelist
    // this.getSubjectList()
    this.getSimpleSubjectList()
    // this.getDirectorysList()
    this.getTagsList()
    this.getuserlist()
    this.handleSizeChange(5)
    this.handleCurrentChange(1)
  },
  methods: {
    // 将试题加入精选题库
    async selectedQuestion (iddata) {
      const str = await this.$confirm('是否将此题加入精选题库?', '提示', {
        type: 'info' // 确认消息框的警告按钮
      }).catch(() => {}) // 这个catch为了处理点击取消后的警告提示的
      if (str !== 'confirm') return this.$message.info('已取消操作')
      await choiceAdd({ id: iddata.id, choiceState: 1 })
      this.$message.success('移入成功')
      this.getQuestionsList()
    },
    // 删除试题
    async del (iddata) {
      const str = await this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        type: 'warning' // 确认消息框的警告按钮
      }).catch(() => {}) // 这个catch为了处理点击取消后的警告提示的
      if (str !== 'confirm') return this.$message.info('已取消操作')
      await remove(iddata)
      this.$message.success('删除成功')
      this.getQuestionsList()
    },
    // 预览题目
    async preview (iddata) {
      this.dialogVisible = true
      this.titleId = iddata.id
      const { data } = await detail(iddata)
      console.log(data)
      if (data.questionType === '2') {
        console.log('duoxuan')
      } else if (data.questionType === '1') {
        console.log('danxuan')
      }
      this.Titledetil = data
      this.options = data.options
    },
    handleCurrentChange (val) {
      this.formData.page = val
      this.getQuestionsList(this.formData)
    },
    handleSizeChange (val) {
      this.formData.pagesize = val
      this.getQuestionsList(this.formData)
    },
    // 筛选题库
    seachQuestions () {
      this.getQuestionsList(this.formData)
      // this.clearAll()
    },
    // 清空筛选栏
    clearAll () {
      this.formData = {
        subjectID: undefined,
        catalogID: undefined,
        tags: undefined,
        keyword: undefined,
        questionType: undefined,
        difficulty: undefined,
        direction: undefined,
        creatorID: undefined,
        remarks: undefined,
        shortName: undefined,
        province: undefined,
        city: undefined,
        page: 1,
        pagesize: 5
      }
    },
    choiceProvince (province) {
      const city = citys(province)
      this.cityList = city
    },
    // 点击学科给目录和标签下拉菜单赋值
    choiceObject (id) {
      this.getSimpleDirectorysList(id)
      this.getTagsList(id)
      this.catalogID = undefined
      this.tags = undefined
      this.keyword = undefined
    },
    /// //////////////////////////////
    // 获取到基础题库列表
    async getQuestionsList (formdata) {
      const { data } = await basetitlelist(formdata)
      console.log(data)
      this.questionsList = data.items
      this.counts = data.counts
    },
    // 获取到学科列表
    async getSubjectList () {
      const { data } = await subjectlist()
      console.log(data)
    },
    // 获取到简单学科列表
    async getSimpleSubjectList () {
      const { data } = await simple()
      console.log(data)
      this.SimpleSubjectList = data
    },
    // 获取目录简单列表
    async getSimpleDirectorysList (id) {
      const { data } = await directorysSimpleList()
      this.Directoryslists = []
      this.Directoryslists = data.filter((item) => item.value === +id)
      console.log(this.Directoryslists)
    },
    // 获取目录列表
    async getDirectorysList () {
      const { data } = await directorysList()
      console.log(data)
    },
    // 获取标签列表
    async getTagsList (id) {
      const { data } = await tagsList()
      this.TagsLists = []
      console.log(data.items)
      const list = data.items
      this.TagsLists = list.filter((item) => item.subjectID === +id)
    },
    // 获取用户列表
    async getuserlist () {
      const { data } = await list({ page: 1, pagesize: 9999, keyword: '' })
      console.log(data.list)
      this.creatorIDList = data.list
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  padding: 15px;
}
</style>
